<template>
	<view class="page">
		<!-- 头部 -->
		<!-- #ifdef MP-WEIXIN -->
			<topVue>
				<image
					src="../../static/back.png" 
					style="width: 38rpx; height: 38rpx; left: 30rpx;" 
					class="absolute-middle"
					@click="$tools.back(1)"
				></image>
				<view class="absolute-auto fw600 fs32">万壮珊</view>
			</topVue>
		<!-- #endif -->
		<view class="banner margin20">
			<view class="flex-between align-center">
				<view class="flex align-center">
					<u-avatar src="1" size="72" class="avatar"></u-avatar>
					<u-avatar src="1" size="72" class="avatar"></u-avatar>
					<u-tag
						text="匹配度96%" 
						shape="circle" 
						bg-color="rgba(252,19,47,0.1)" 
						color="#FC132F" 
						border-color="#FC132F" 
						size="default" 
						style="margin-left: 20rpx;"/>
				</view>
				<view class="btn" @click="$tools.route('./personal')">查看主页</view>
			</view>
			<u-gap height="30"></u-gap>
			<view class="flex align-center">
				<text style="color: #999;">共同爱好：</text>
				<view class="fw600 flex-1"  style="line-height: 1.4;">撸猫、看剧撸猫</view>
			</view>
			<u-gap height="30"></u-gap>
			<view class="flex align-center">
				<text style="color: #999;">她的性格：</text>
				<view class="fw600 flex-1" style="line-height: 1.4;">温柔、活泼、性格开朗</view>
			</view>
		</view>
		
		<view class="contentVue margin40">
			<view class="text-center fs24" style="color: #AAA;">05:30</view>
			<view class="leftVue flex margin30">
				<u-avatar src="1" size="60"></u-avatar>
				<view class="right flex-1">
					<view class="name">倪朗育</view>
					<view class="message">hi，我是倪朗育，“武汉相亲多动”双方匹配度高达96%，有兴趣线下聊一聊吗？</view>
					<view class="tagVue flex flex-wrap">
						<u-tag
							text="26岁" 
							shape="circle" 
							bg-color="#9EC3FF" 
							color="#fff" 
							border-color="#9EC3FF" 
							size="default"
							class="tag"/>
						<u-tag
							text="本科" 
							shape="circle" 
							bg-color="#9EC3FF" 
							color="#fff" 
							border-color="#9EC3FF" 
							size="default" 
							class="tag"/>
						<u-tag
							text="现居湖北武汉硚口区"
							shape="circle" 
							bg-color="#9EC3FF" 
							color="#fff" 
							border-color="#9EC3FF" 
							size="default" 
							class="tag"/>	
						<u-tag
							text="10-20W"
							shape="circle" 
							bg-color="#9EC3FF" 
							color="#fff" 
							border-color="#9EC3FF" 
							size="default" 
							class="tag"/>		
					</view>
				</view>
			</view>
			<view class="rightVue margin30 flex-end">
				<view class="right">
					<view class="name text-right">廖茜</view>
					<view class="message">我已接受你的邀请，期待与你线下交流</view>
				</view>
				<u-avatar src="1" size="60"></u-avatar>
			</view>
			
		</view>
	
		<view class="botVue flex-center">
			<!-- <view class="inviteBtn">
				<text>接受邀请</text>
			</view> -->
			<view class="textareaVue flex align-center">
				<textarea 
					type="text"
					v-model="message" 
					:auto-height="true" 
					maxlength="-1" 
				></textarea>
				<view class="send">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				message: "",
			}
		}
	}
</script>

<style lang="less" scoped>
	.banner {
		width: 690rpx;
		background: #FCF7FB;
		box-shadow: 0px 4rpx 8rpx 0px rgba(255,255,255,0.5);
		border-radius: 16rpx;
		padding: 40rpx;
		.avatar:nth-child(2) {
			margin-left: -16rpx;
		}
		.btn {
			width: 164rpx;
			height: 56rpx;
			background: #FC132F;
			border-radius: 28rpx;
			text-align: center;
			line-height: 56rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}
	.contentVue {
		width: 690rpx;
		.leftVue {
			.right {
				padding-left: 20rpx;
				.name {
					color: #999;
					font-weight: 600;
				}
				.message {
					width: 100%;
					background: #F4F4F4;
					border-radius: 10rpx;
					color: #242424;
					line-height: 1.5;
					padding: 20rpx;
					margin-top: 20rpx;
				}
				.tagVue {
					margin-top: 20rpx;
					.tag {
						margin: 0 20rpx 20rpx 0;
					}
				}
			}
		}
		
		.rightVue {
			.right {
				padding-right: 20rpx;
				.name {
					color: #999;
					font-weight: 600;
				}
				.message {
					width: 100%;
					background: #FC132F;
					border-radius: 10rpx;
					color: #fff;
					// line-height: 1.5;
					padding: 20rpx;
					margin-top: 20rpx;
				}
			}	
		}
	}
	
	.botVue {
		width: 750rpx;
		min-height: 160rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-top: 20rpx;
		padding-bottom: 44rpx;
		z-index: 99;
		.inviteBtn {
			width: 426rpx;
			height: 72rpx;
			background: #FC132F;
			border-radius: 48rpx;
			line-height: 72rpx;
			text-align: center;
			text {
				font-weight: 600;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
		
		.textareaVue {
			width: 100%;
			height: 100%;
			padding: 0 30rpx;
			textarea {
				width: 100%;
				max-height: 160rpx;
				min-height: 72rpx;
				display: block;
				box-sizing: border-box;
				background: #FAFAFA;
				border-radius: 8px;
				color: #333;
				font-size: 28rpx;
				padding: 20rpx;
				line-height: 1.4;
				overflow-y: auto;
			}
			.send {
				width: 120rpx;
				height: 82rpx;
				text-align: center;
				line-height: 82rpx;
				background: #FC132F;
				border-radius: 8rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
	
	
	
</style>